<template>
	<view class="page_head">
		<view class="Select_parcel_nav">
			<view :class="cat_id == 0?'Select_parcel_titles':'Select_parcel_title'" @click="pick_nav(0)">全部</view>
			<view :class="cat_id == item.id?'Select_parcel_titles':'Select_parcel_title'"  @click="pick_nav(item.id)" v-for="(item,index) in cat_list" :key="index">{{item.name}}</view>
		</view>
		<view class="Select_parcel_item" v-for="(item,index) in list" :key="index">
			<image class="Select_parcel_item_img" :src="item.pic_url" mode=""></image>
			<view class="Select_parcel_item_title">{{item.name}}</view>
			<view class="Select_parcel_item_content">简介：{{item.desc}}</view>
			<view class="Select_parcel_item_bottom">
				<view class="Select_parcel_item_price_head">
					<view class="Select_parcel_item_price">￥{{item.original_price}}</view>
					<view class="Select_parcel_item_msg">起</view>
				</view>
				<view class="Select_parcel_item_button" @click="get_adopt_detail(item.id)">我要认养</view>
			</view>
			<view class="select_bottom_head">
				<view class="select_bottom_item">
					<view class="select_bottom_item_title">
						品种
					</view>
					<view class="select_bottom_item_content">
						{{item.varieties}}
					</view>
				</view>
				<view class="select_bottom_item">
					<view class="select_bottom_item_title">
						生长周期
					</view>
					<view class="select_bottom_item_content">
						{{item.growth_cycle}}天
					</view>
				</view>
				<view class="select_bottom_item">
					<view class="select_bottom_item_title">
						剩余数量
					</view>
					<view class="select_bottom_item_content">
						{{item.remaining_num}}/{{item.goods_num}}
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import index from "@/api/livestockAdoption/index.js";
	export default {
	  data() {
	    return {
			list:[],
			cat_id:0,
			page:1,
			cat_list:[]
	    };
	  },
	  onLoad(t) {
	  },
	  filters: {
	  },
	  created() {
	  	this.get_list();
	  },
	  methods: {
		  //选择分类
		  pick_nav(cat_id){
			  this.cat_id = cat_id;
			  this.page = 1;
			  this.get_list();
		  },
		// 获取企业端首页数据
		async get_list() {
			try {
				let formData = {
					cat_id: this.cat_id,
					page: this.page
				}
				const res = await index.adopt_goods_list(formData);
				if(res.code == 0){
					if(this.page == 1){
						this.list = res.data.list;
						this.cat_list = res.data.cat_list;
					}else{
						this.list = this.list.concat(res.data.list);
					}
				}
			} catch (error) {
			}
		},
		//触底加载
		onReachBottom: function() {
			this.page = this.page + 1;
			this.get_list();
		},
		  // 跳转到认养详情页面
		  get_adopt_detail(id){
			  uni.navigateTo({
			  	url:"../adopt_detail/adopt_detail?id="+id
			  })
		  }
	  },
	};
</script>

<style scoped>
	.select_bottom_item_content{
		color: #868686;
		margin-top: 15rpx;
	}
	.select_bottom_item_title{
		color: #000000;
	}
	.select_bottom_item{
		width: 33.3%;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-right:1rpx solid #e2e2e2;
	}
	.select_bottom_head{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;
	}
	.Select_parcel_item_button{
		padding: 10rpx 20rpx;
		border-radius: 90rpx;
		background: rgb(85,177,85);
		color: #FFFFFF;
	}
	.Select_parcel_item_msg{
		font-size:24rpx;
		color: #9d9d9d;
	}
	.Select_parcel_item_price_head{
		display: flex;
		align-items: flex-end;
		font-size: 40rpx;
		color: rgb(248,38,10);
		font-weight: 600;
	}
	.Select_parcel_item_bottom {
		width: 95%;
		height: 100rpx;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.Select_parcel_item_content {
		width: 95%;
		margin: auto;
	}

	.Select_parcel_item_title {
		width: 95%;
		margin: 10rpx auto;
	}

	.Select_parcel_item_img {
		width: 100%;
		height: 300rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}

	.Select_parcel_item {
		width: 95%;
		margin: 20rpx auto;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.Select_parcel_titles {
		color: #000000;
		border-bottom: 6rpx solid #00aa00;
		padding-bottom: 4rpx;
	}

	.Select_parcel_title {
		color: #868686;
		border-bottom: 6rpx solid #FFFFFF;
		padding-bottom: 4rpx;
	}

	.Select_parcel_nav {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background: #FFFFFF;
	}

	.page_head {
		width: 100%;
		min-height: 100vh;
		background: #f1f1f1;
	}
</style>
